<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      background-color: pink;
      margin: 10px 0;
      font-size: 16px;
      color: black;
      min-height: 50px;
    }
  </style>
</head>

<body>
  <ul></ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    let ul = document.querySelector('ul');
    // let li = document.querySelectorAll('li');
    $.ajax({
      url: 'http://apis.juhe.cn/goodbook/catalog',
      dataType: 'jsonp',
      data: {
        key: '72b6af6ade61e756d26887f777c47257'
      },
      success(res) {
        let str = '';
        res.result.forEach(item => {
          str += `<li id="${item.id}">${item.catalog}</li>`;
        })
        ul.innerHTML = str;
      }
    })
    
    ul.onclick = function (ev) {
      ev = ev || window.event;
      let target = ev.target || ev.srcELement;
      let id = target.id;
      console.log(id);
      $.ajax({
        url: 'http://apis.juhe.cn/goodbook/query',
        dataType: 'jsonp',
        data: {
          key: '72b6af6ade61e756d26887f777c47257',
          catalog_id: id,
          pn: 1,
          rn: 10
        },
        success(res) {
          let str = '';
          res.result.data.forEach(item=>{
            str += `<p>${item.title}</p>`
          })
          target.innerHTML += str;
          console.log(str);
        }
      })
    }
  </script>
</body>

</html>